<template>
  <el-dialog
    id="displgid"
    :visible.sync="modalVisible"
    v-if="modalVisible"
    :title="title"
    centered
    @close.stop="$emit('closepopup')"
    :before-close="handleClose"
    :append-to-body="true"
    :close-on-click-modal = "false"
  >
    <slot />
  </el-dialog>
</template>

<script>
import ScaleBox from "vue2-scale-box"; 
import { loadCSS } from "../utils/common";
export default {
  components: {
    ScaleBox,
  },
  props: {
    // modal是否可见
    modalVisible: {
      type: Boolean,
      default: false,
    },
    title: String,
  },
  data() {
    return {
      scalevalue: this.$store.state.scalevalue,
      cssLoaded: false,
      scaleVal: false,
    };
  },
  created() {  
    let zhi  = ((1 / window.devicePixelRatio) * 0.9 + 0.3 ).toFixed(2)
    // document.documentElement.style.setProperty("--main-bg", zhi);
    // if (window.devicePixelRatio >= 1.5) {
      
    // } else if (window.devicePixelRatio >= 1.25 && window.devicePixelRatio <= 1.5) {
    //   document.documentElement.style.setProperty("--main-bg", zhi);
    // }

    if (window.devicePixelRatio) {
      this.scaleVal = true;
    }
    setTimeout(() => {
      this.$nextTick(() => {
        if (window.devicePixelRatio != 1) {
          // document.getElementById("displgid").style.zoom = (
          //   (1 / window.devicePixelRatio) * 0.9 +
          //   0.3
          // ).toFixed(2); 
          // this.$store.state.scalevalue = (
          //   (1 / window.devicePixelRatio) * 0.9 +
          //   0.3
          // ).toFixed(2);
          this.scalevalue = ((1 / window.devicePixelRatio) * 0.9 + 0.3).toFixed(
            2
          );
          document.body.style.fontSize = "20px";
        }
      }); 
      // console.log(document.getElementById("displgid").clientWidth, 1111);
      // console.log(document.getElementById("displgid").clientHeight, 1111);
    }, 1000);
  },
  watch: {
    //侦听store里某个属性的变化
    "$store.state.scalevalue": function (val) { 
      this.scalevalue = val;
    },
  },
  methods: {
    onConfirm() {
      this.$emit("bulkImport");
    },
    closeModal() {
      this.$emit("closepopup");
    },
    handleClose() { 
      this.$parent.closepopup();
      // this.$emit("closepopup");
    },
  },
};
</script>

<style scoped>
.el-dialog__wrapper {
  backdrop-filter: blur(0.2rem);
  height: 100%;
}

/deep/ .el-dialog__header{
  width: 100%;
 position: absolute;
 top:0%;
 right:3%; 
 z-index: 9999;
}


/deep/ .el-dialog {
  width:30%;
  height:80%;
  margin: 0 auto;
  margin-top: 6% !important;
  display: flex;
  flex-direction: column;
  background-image: url("~@/assets/kspcmiddledislogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: rgb(0, 38, 141, 0) !important;
  border: none;
  box-shadow: none;
  padding: 0.9% 1.2%;
  box-sizing: border-box;
  overflow: hidden;
  font-family: JCYT; 
  position: relative;
}
/deep/ .el-dialog__footer {
  position: absolute;
  bottom: 0;
  right: 0;
}
/deep/ .el-dialog__title {
  display: none;
  font-size: 1rem;
  color: #182c56;
  border-bottom: 0.05rem solid #182c56;
}
/deep/ .el-dialog__body {
  height: 98%;
  /* overflow: hidden; */
  flex: 1;
  padding: 0px;
  color: #192c55;
  position: absolute;
  top: 0;
  left: 1%; 
  width: 95%; 
}
/deep/ .el-dialog__close {
  width: 1.5rem;
  height: 1.5rem;
  background: url("~@/assets/closepopupshow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/deep/ .el-dialog__close:before {
  content: "替";
  visibility: hidden;
}
</style>
<style lang="scss">
/* @import url("@/assets/css/scalebig.css"); */

/* 在这里定义的css变量，叫做全局css变量。在任何选择器中，都可以去使用。 */
:root {
  /* css变量中的值，可以是“任何值” */
  --main-bg: 1;
}

.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  zoom: var(--main-bg);
}
.el-select-dropdown {
  zoom: var(--main-bg);
}
.el-picker-panel {
  zoom: var(--main-bg);
}
.elp-table {
  zoom: var(--main-bg);
}
</style>